<template>
	<view class="container">
		<view class="flex-just-between top-info">
			<view class="monthly-calendar" @click="toCalendar">{{ $t('diary.monthlyCalendar') }}</view>
			<image class="avatar" src="/static/logo.png" mode="" @click="toMy"></image>
		</view>
		<view class="content">
			<view class="top-title flex-item-center">
				<view>{{ $t('diary.thisWeek') }}</view>
				<view class="date">{{ weekRange }}</view>
			</view>
			<view class="week-box flex-item-center">
				<view class="week-item" :class="{
                    'now': item.isToday,
                    'read': item.isRead
                  }" v-for="(item, index) in weekDays" :key="index">
					<view>{{ item.day }}</view>
					<text>{{ $t(`diary.week.${item.weekday}`) }}</text>
				</view>
			</view>
			<view class="diary-info-box line">
				<view class="left-info-box">
					<view class="info-item">
						<view class="line-date">4/17</view>
						<view class="des">
							<image class="mood-img" src="@/static/star-icon.png"></image>
							{{ $t('diary.diaryDescription1') }}
						</view>
						<view class="date-time">4.17 周四 09:30</view>
					</view>
				</view>
				<view class="right-info-box">
					<view class="info-item">{{ $t('diary.diaryDescription2') }}</view>
				</view>
			</view>
		</view>
		<tab-bar :curIndex="2"></tab-bar>
	</view>
</template>

<script>
	import TabBar from '@/pages/components/tab-bar/index.vue'
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				weekDays: [],
				weekRange: ''
			}
		},
		created() {
			this.calculateThisWeek()
		},
		methods: {
			calculateThisWeek() {
				const today = new Date();
				const dayOfWeek = today.getDay(); // 0=周日, 1=周一...6=周六

				// 计算本周第一天（周日）
				const firstDay = new Date(today);
				firstDay.setDate(today.getDate() - dayOfWeek);

				this.weekDays = [];
				for (let i = 0; i < 7; i++) {
					const date = new Date(firstDay);
					date.setDate(firstDay.getDate() + i);

					const isToday = date.toDateString() === today.toDateString();
					const isRead = i <= dayOfWeek; // 已过去的日期标记为已读

					this.weekDays.push({
						date: date,
						day: date.getDate(),
						weekday: date.getDay(), // 使用实际星期值 (0-6)
						isToday,
						isRead
					});
				}

				// 格式化日期范围
				this.weekRange = this.formatDateRange();
			},

			formatDateRange() {
				const formatDate = (date) => {
					return `${date.getMonth() + 1}/${date.getDate()}`;
				}
				return `${formatDate(this.weekDays[0].date)}-${formatDate(this.weekDays[6].date)}`;
			},

			toCalendar() {
				uni.navigateTo({
					url: '/pages/diary/calendar/calendar'
				})
			},

			toMy() {
				uni.navigateTo({
					url: '/pages/my/my'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background: url('/static/diary-bg.png') top center no-repeat;
		background-size: 100%;

		.top-info {
			margin-bottom: 46rpx;
			padding: 22rpx 42rpx 0;

			.monthly-calendar {
				width: 232rpx;
				height: 74rpx;
				line-height: 74rpx;
				background: url('/static/diary-title-bg.png') no-repeat;
				background-size: 100%;
				padding-left: 74rpx;
				font-size: 32rpx;
				font-weight: bold;

			}

			.avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}
		}

		.content {
			background-color: rgba(255, 255, 255, .7);
			border-radius: 40rpx 40rpx 0 0;

			.top-title {
				margin-bottom: 42rpx;
				padding: 28rpx 34rpx 0;
				color: #666;
				font-size: 28rpx;

				.date {
					width: 78%;
					text-align: center;
				}
			}

			.week-box {
				margin-bottom: 42rpx;
				padding: 0 34rpx;

				.week-item {
					margin-right: 24rpx;
					width: 76rpx;
					height: 116rpx;
					display: flex;
					justify-content: center;
					flex-direction: column;
					text-align: center;
					background-color: #999;
					color: #fff;
					font-size: 24rpx;
					border-radius: 38rpx;
					line-height: 40rpx;

					&:last-child {
						margin-right: 0;
					}

					&.read {
						background-color: #fff;
						color: #000;
					}

					&.now {
						background-color: #52A5F3;
					}
				}
			}

			.diary-info-box {
				padding-top: 106rpx;
				min-height: 69.3vh;
				background: linear-gradient(to right, #fff 50%, #fff5e9 50%);
				border-radius: 60rpx 60rpx 0 0;
				display: flex;
				position: relative;
				font-size: 24rpx;

				&.line {
					&::before {
						content: '';
						position: absolute;
						left: 49%;
						width: 16rpx;
						min-height: 61vh;
						background: url('/static/line-img.png') no-repeat;
						background-size: 100%;
						z-index: 1;
					}
				}
			}

			.left-info-box {
				flex: 0 0 50%;
				width: 50%;
				padding: 68rpx 42rpx 0 28rpx;

				.info-item {
					background-color: #fff;
					border: 2rpx solid #d9d9d9;
					border-radius: 20rpx;
					padding: 24rpx 10rpx 10rpx 20rpx;
					position: relative;

					.mood-img {
						display: inline-block;
						width: 32rpx;
						height: 32rpx;
					}

					.des {
						margin-bottom: 8rpx;
						line-height: 34rpx;
					}

					.date-time {
						font-size: 20rpx;
						color: #999;
						line-height: 36rpx;
					}
				}
			}

			.line-date {
				position: absolute;
				right: -78rpx;
				bottom: 26rpx;
				width: 68rpx;
				height: 68rpx;
				line-height: 68rpx;
				color: #fff;
				font-size: 24rpx;
				background: url('/static/date-bg.png') no-repeat;
				background-size: 100%;
				text-align: center;
			}

			.right-info-box {
				padding: 68rpx 50rpx 18rpx 58rpx;

				.info-item {
					padding: 18rpx 10rpx 18rpx 20rpx;
				}
			}
		}
	}
</style>